<script type="text/html" id="barDemo">
    <button onclick="see({{d.id}})" class="btn btn-sm btn-outline-dribbble">详情</button><br> {{# if(d.status == 1) { }}
    <span class="btn btn-sm btn-outline-warning">进行中</span> {{# } else if(d.status == 2) { }}
    <span class="btn btn-sm btn-outline-success">未结算</span> {{# } else if(d.status == 3) { }}
    <span class="btn btn-sm btn-outline-primary">已结算</span> {{# } else { }}
    <button onclick="edit({{d.id}})" class="btn btn-sm btn-outline-secondary">编辑</button><br>
    <span class="btn btn-sm btn-outline-info">未开始</span> {{# } }}
</script>
<script>
    $(".rowTable").click(function(event) {
        event.stopPropagation(); //  阻止事件冒泡
        $('.rowTable').css('display', 'none')
    });
    $("#tableContent").click(function(event) {
        event.stopPropagation(); //  阻止事件冒泡
    });
    // 社群礼包
    var chartDom5 = document.getElementById('middleData3');
    var resizeMyChartContainer5 = function() {
        let domWidth = $('.middleData').width();
        chartDom5.style.width = (domWidth / 3) - 30 + 'px';
        chartDom5.style.height = (domWidth / 3) - 180 + 'px';
    };
    resizeMyChartContainer5();
    let resourceLabels = "{$viewData.resourcePack.resourceLine.labels}";
    let resourceDatas = "{$viewData.resourcePack.resourceLine.datas}";
    let resourceDataDay = resourceLabels.split(',');
    let resourceDataValue = resourceDatas.split(',');
    var myChart5 = echarts.init(chartDom5);
    var option;
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '6%',
            top: '16%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: resourceDataDay,
            gridLines: {
                display: false
            },
            //y轴刻度
            axisTick: {
                show: false
            },
            //y轴刻度标签数字
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#8557C3FF' //y轴标签颜色
                }
            },
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
                // name: '需求总数\n{c|{}}',
                type: 'line',
                // stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#406CE5FF'
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#F2FBFFFF',
                    } //改变区域颜色
                },
                data: resourceDataValue,
            },
            // {
            //     // name: '当月新增\n{c|{}}',
            //     type: 'line',
            //     // stack: '总量',
            //     areaStyle: {},
            //     itemStyle: {
            //         normal: {
            //             color: '#F27E1BFF'
            //         }
            //     },
            //     areaStyle: {
            //         normal: {color: '#FFF7F1FF',}//改变区域颜色
            //     },
            //     emphasis: {
            //         focus: 'series'
            //     },
            //     data: [22, 18, 19, 23, 29, 33, 31]
            // },
        ]
    };
    option && myChart5.setOption(option);
    myChart5.resize();

    // 108年会员
    var chartDom4 = document.getElementById('middleData2');
    var resizeMyChartContainer4 = function() {
        let domWidth = $('.middleData').width();
        // console.log(domWidth);
        console.log(domWidth / 3);
        chartDom4.style.width = (domWidth / 3) - 30 + 'px';
        chartDom4.style.height = (domWidth / 3) - 180 + 'px';
    };
    resizeMyChartContainer4();
    let yearLabels = "{$viewData.yearMember.yearLine.labels}";
    let yearDatas = "{$viewData.yearMember.yearLine.datas}";
    let yearDataDay = yearLabels.split(',');
    let yearDataValue = yearDatas.split(',');
    var myChart4 = echarts.init(chartDom4);
    var option;
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '6%',
            top: '16%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: yearDataDay,
            gridLines: {
                display: false
            },
            //y轴刻度
            axisTick: {
                show: false
            },
            //y轴刻度标签数字
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#8557C3FF' //y轴标签颜色
                }
            },
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            // name: '需求总数\n{c|{}}',
            type: 'line',
            // stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            itemStyle: {
                normal: {
                    color: '#406CE5FF'
                }
            },
            areaStyle: {
                normal: {
                    color: '#F2FBFFFF',
                } //改变区域颜色
            },
            data: yearDataValue,
        }]
    };
    option && myChart4.setOption(option);
    myChart4.resize();

    // 8.8月会员
    var chartDom3 = document.getElementById('middleData1');
    var resizeMyChartContainer3 = function() {
        let domWidth = $('.middleData').width();
        chartDom3.style.width = (domWidth / 3) - 30 + 'px';
        chartDom3.style.height = (domWidth / 3) - 180 + 'px';
    };
    resizeMyChartContainer3();
    let monthLabels = "{$viewData.monthMember.monthLine.labels}";
    let monthDatas = "{$viewData.monthMember.monthLine.datas}";
    let monthDataDay = monthLabels.split(',');
    let monthDataValue = monthDatas.split(',');
    var myChart3 = echarts.init(chartDom3);
    var option;
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '6%',
            top: '16%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: monthDataDay,
            gridLines: {
                display: false
            },
            //y轴刻度
            axisTick: {
                show: false
            },
            //y轴刻度标签数字
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#8557C3FF' //y轴标签颜色
                }
            },
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            // name: '需求总数\n{c|{}}',
            type: 'line',
            // stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            itemStyle: {
                normal: {
                    color: '#406CE5FF'
                }
            },
            areaStyle: {
                normal: {
                    color: '#F2FBFFFF',
                } //改变区域颜色
            },
            data: monthDataValue,
        }]
    };
    option && myChart3.setOption(option);
    myChart3.resize();

    // 部门总营业额
    var chartDom2 = document.getElementById('findResource');
    var resizeMyChartContainer2 = function() {
        let domWidth = $('.card-dth2').width();
        chartDom2.style.width = domWidth + 'px';
        chartDom2.style.height = (domWidth / 2) - 20 + 'px';
    };
    resizeMyChartContainer2();
    let underLabels = "{$viewData.under.underUsersPriceLine.labels}";
    let underDatas = "{$viewData.under.underUsersPriceLine.datas}";
    let underDataDay = underLabels.split(',');
    let underDataValue = underDatas.split(',');
    var myChart2 = echarts.init(chartDom2);
    var option;
    option = {
        title: {
            // text: '堆叠区域图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: underDataDay,
            gridLines: {
                display: false
            },
            //y轴刻度
            axisTick: {
                show: false
            },
            //y轴刻度标签数字
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#8557C3FF' //y轴标签颜色
                }
            },
        }],
        yAxis: [{
            type: 'value'
        }],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '3%',
            containLabel: true
        },
        series: [{
            // name: '需求总数\n{c|{}}',
            type: 'line',
            // stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            itemStyle: {
                normal: {
                    color: '#406CE5FF'
                }
            },
            areaStyle: {
                normal: {
                    color: '#F2FBFFFF',
                } //改变区域颜色
            },
            data: underDataValue,
        }]
    };
    option && myChart2.setOption(option);
    myChart2.resize();

    window.onresize = function() {



        resizeMyChartContainer2();
        myChart2.resize();
        resizeMyChartContainer3();
        myChart3.resize();
        resizeMyChartContainer4();
        myChart4.resize();
        resizeMyChartContainer5();
        myChart5.resize();


    };

    function marketingUsers(type) {
        console.log("mid=" + mid, "type=" + type);
        var element = $('.myUsers .item[myUsersType=' + type + ']');
        element.addClass('activeBtn');
        element.siblings().removeClass('activeBtn');
        layui.use('table', function() {
            var table = layui.table,
                form = layui.form;
            // 表格初始化
            table.render({
                elem: '#rowTable',
                skin: 'line' //行边框风格
                    ,
                even: true //开启隔行背景
                    ,
                url: '{:url("/marketing/marketingUsers")}',
                method: 'post',
                where: {
                    mid: mid,
                    type: type
                },
                page: true //开启分页
                    ,
                cols: [
                    [{
                            field: 'nickname_data',
                            title: '头像/昵称'
                        }, {
                            field: 'identity_data',
                            title: '序号/身份'
                        }, {
                            field: 'user_type',
                            title: '角色/来源'
                        }, {
                            field: 'date_source',
                            title: '访问时间/活动来源'
                        }, {
                            field: 'pay_data',
                            title: '付费/付费时间'
                        }
                        // , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo'}
                    ]
                ],
                done: function(res) {
                    var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                    element.css('overflow', 'visible');
                    element.children('.dropdown-menu').css('min-width', 'auto');
                },
                parseData: function(res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.data.count,
                        "data": res.data.list
                    };
                }
            });

            //头工具栏事件
            table.on('toolbar(rowTable)', function(obj) {
                console.log(obj)
                    //
                    // var checkStatus = table.checkStatus(obj.config.id);
                    // switch(obj.event){
                    //     case 'getCheckData':
                    //         var data = checkStatus.data;
                    //         layer.alert(JSON.stringify(data));
                    //         break;
                    //     case 'getCheckLength':
                    //         var data = checkStatus.data;
                    //         layer.msg('选中了：'+ data.length + ' 个');
                    //         break;
                    //     case 'isAll':
                    //         layer.msg(checkStatus.isAll ? '全选': '未全选');
                    //         break;
                    //
                    //     //自定义头工具栏右侧图标 - 提示
                    //     case 'LAYTABLE_TIPS':
                    //         layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    //         break;
                    // };
            });
        });

    }
</script>